<template>
  <div>
    <div class="head-search">
      <search @onSubmit="onSearch">
        <el-form-item>
          <el-input placeholder="请输入内容" clearable v-model="searchData.val" size="small" class="input-with-select">
            <el-select v-model="searchData.select" clearable slot="prepend" placeholder="请选择">
              <el-option v-for="(item, index) in searchList"
                         :key="index"
                         :label="item.dictLabel"
                         :value="item.dictValue"></el-option>
<!--              <el-option label="登记人" value="2"></el-option>-->
            </el-select>
          </el-input>
        </el-form-item>
      </search>
<!--      <el-button type="primary" size="small">高级查询</el-button>-->
    </div>

    <div class="list-box">
      <el-table
        :data="tableData"
        border
        height="calc(100vh - 250px)"
        v-loading="tableLoading"
        class="table">
        <el-table-column
          type="index"
          fixed="left"
          label="序号"
          width="60"
          align="center">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="describe"
          width="200"
          label="项目名称">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="gmtCreate"
          width="180"
          align="center"
          :formatter="formatDate"
          label="移交时间">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="remark"
          align="left"
          min-width="200"
          label="移交备注">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="userCreate"
          width="160"
          label="移交用户">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="status"
          align="center"
          width="120"
          label="状态">
          <template slot-scope="scope">
            <span :style="{color: statusList[scope.row.status].color}">{{statusList[scope.row.status].label}}</span>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          fixed="right"
          align="center"
          prop="address"
          label="操作"
          width="180">
          <template slot-scope="scope">
            <el-button icon="el-icon-download"
                       v-if="Number(scope.row.status) === 7"
                       @click="handleDownload(scope.row, 7)"
                       type="text">下载</el-button>
            <el-button icon="el-icon-download"
                       @click="handleDownload(scope.row, 4)"
                       v-if="Number(scope.row.status) === 4"
                       type="text">导出日志</el-button>
            <el-button icon="el-icon-view"
                       @click="handleDownload(scope.row, 2)"
                       v-if="Number(scope.row.status) === 2"
                       type="text">检测日志</el-button>
<!--            <el-button icon="el-icon-refresh" type="text">生成资源</el-button>-->
            <el-button icon="el-icon-delete" @click="handleDel(scope.row)" type="text" style="color: #F56C6C">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="Number(page.total)>0"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNo"
        :page-sizes="[20, 40, 60, 80]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(page.total)">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Search from '../../../../components/search/search'
import { delDataExportList, downloadDataExportList, getDataExportList } from '../../../../api/dataManage/dataExport'
// import { DEFAULT_ENTRYPOINT } from '../../../../config/entrypoint'

export default {
  name: 'exportDownload', // 导出下载
  components: { Search },
  props: {
    idTable: {
      type: String
    },
    idCategory: {
      type: String
    }
  },
  // 数据列表
  data () {
    return {
      searchList: [{
        dictLabel: '项目名',
        dictValue: 'describe'
      }, {
        dictLabel: '日期查询',
        dictValue: 'gmtCreate'
      }, {
        dictLabel: '操作用户',
        dictValue: 'userCreate'
      }, {
        dictLabel: '状态',
        dictValue: 'status'
      }],
      searchData: {
        select: 'describe',
        val: ''
      },
      page: {
        pageNo: 1,
        pageSize: 20,
        total: 0
      },
      statusList: {
        0: {
          label: '未开始',
          color: '#909399'
        },
        1: {
          label: '四性检测中',
          color: '#666'
        },
        2: {
          label: '检测未通过',
          color: '#F56C6C'
        },
        3: {
          label: '正在导出中',
          color: '#666'
        },
        4: {
          label: '导出失败',
          color: '#F56C6C'
        },
        5: {
          label: '文件包压缩中',
          color: '#666'
        },
        6: {
          label: '压缩失败',
          color: '#F56C6C'
        },
        7: {
          label: '导出成功',
          color: '#67C23A'
        }
      },
      tableData: [],
      params: [],
      tableLoading: false
    }
  },
  methods: {
    getList () {
      const param = {
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
        params: [{
          name: 'idCategory',
          op: 'eq',
          value: this.idCategory
        }]
      }
      param.params = param.params.concat(this.params)
      this.tableLoading = true
      getDataExportList(param).then(res => {
        this.tableData = res.data.data.list
        this.page.total = Number(res.data.data.total)
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.page.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.page.pageNo = val
      this.getList()
    },
    onSearch () {
      this.page.pageNo = 1
      this.params = []
      if (this.searchData.val) {
        this.params = [{
          name: this.searchData.select,
          op: 'like',
          value: this.searchData.val
        }]
      }
      this.getList()
    },
    handleDownload (row) {
      // 下载
      downloadDataExportList(row.id).then(res => {
        // console.log(res.headers['content-type'].split('/'))
        this.download(res.data, row.describe + '.' + res.headers['content-type'].split('/')[0])
      })
    },
    download (data, fileName) {
      const blob = new Blob([data])
      const downloadElement = document.createElement('a')
      const href = window.URL.createObjectURL(blob) // 创建下载的链接
      downloadElement.href = href
      downloadElement.target = '_blank'
      downloadElement.download = fileName // 下载后文件名
      document.body.appendChild(downloadElement)
      downloadElement.click() // 点击下载
      document.body.removeChild(downloadElement) // 下载完成移除元素
      window.URL.revokeObjectURL(href) // 释放掉blob对象
    },
    handleDel (row) {
      // 删除
      this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delDataExportList([row.id]).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList()
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .head-search{
    position: relative;
  }
  .list-box {

  }
</style>
